<template>
	<view class="padding-20">
		<view class="info">
			<view class="not-logged-in" v-if="!isLogin || userInfo.id === 0" @tap="integrals">
				<text style="flex: 1">注册解锁更多惊喜</text>

				<view v-if="system.app === 'alipay'" style="20%">
					<u-button type="primary" :plain="true">注册/登录</u-button>
				</view>
				<button v-else type="primary" :plain="true">注册/登录</button>
			</view>
			<view class="logged-in" v-else>
				<view style="display: flex; justify-content: space-between; align-items: center; padding: 0 10rpx">
					<view class="flex align-center">
						<image class="avatar" :src="userBalance.avatarImage" />
						<view class="">
							<view style="margin-left: 24rpx; font-size: 34rpx">
								<text style="margin-right: 10rpx">{{ userBalance.nickName }}</text>
								<image style="width: 35rpx; height: 35rpx" src="../../static/images/component/VIP.png"></image>
								<text style="margin-left: 10rpx; font-size: 22rpx; color: #919191">{{ userBalance.gradeName }}</text>
							</view>
							<view class="ml-20" style="font-size: 24rpx">{{ userInfo.mobile }}</view>
							<view class="ml-20" style="font-size: 20rpx">NO.{{ userInfo.number }}</view>
						</view>
					</view>

					<view class="user-code" style="color: #edac2f" @click="isShow = true">
						<image class="icon" src="@/static/icon/二维码.svg"></image>
						<view style="text-align: center; color: black; font-size: 24rpx">会员码</view>
						<u-popup :show="isShow" mode="center" closeOnClickOverlay closeable @close="isShow = false">
							<view class="fisze-24 mt-20" style="padding-top: 100rpx; height: 300rpx">
								<w-barcode v-if="isShow" :options="options" />
								<view class="mt-10 text-align-center">{{ userInfo.number || '--' }}</view>
							</view>
						</u-popup>
					</view>
				</view>

				<view class="member-info">
					<view>
						<view style="font-weight: 600">
							{{ userBalance.point || 0 }}
						</view>
						<view class="bottom">
							<image src="../../static/images/component/jifen-L.png"></image>
							积分
						</view>
					</view>
					<view>
						<view style="font-weight: 600">
							{{ (userBalance.balance && userBalance.balance.toFixed(2)) || 0 }}
						</view>
						<view class="bottom">
							<image src="../../static/images/component/qianbaoyue.png"></image>
							余额
						</view>
					</view>
					<view>
						<view style="font-weight: 600">
							{{ (userBalance.giftBalance && userBalance.giftBalance.toFixed(2)) || 0 }}
						</view>
						<view class="bottom">
							<image src="../../static/images/component/liwu.png"></image>
							赠送余额
						</view>
					</view>
					<view>
						<view style="font-weight: 600">
							{{ userBalance.couponCount || 0 }}
						</view>
						<view class="bottom">
							<image src="../../static/images/component/youhuiquan.png"></image>
							优惠券
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import utils from '@/common/util.js';
export default {
	data() {
		return {
			isShow: false,
			system: utils.getSystemInfo()
			// options: {
			// 	width: 650,
			// 	height: 100,
			// 	code: ''
			// },
		};
	},
	computed: {
		...mapState(['userInfo', 'isLogin', 'userBalance']),
		options() {
			return {
				width: 650,
				height: 100,
				code: this.userInfo.number
			};
		}
	},
	mounted() {
		this.options.code = this.userInfo.number;
	},
	created() {
		// this.options.code = this.userInfo.number
	},
	methods: {
		integrals() {
			if (!this.isLogin || this.userInfo.id === 0) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.info {
	position: relative;
	border-radius: 10rpx;
	background-color: #ffffff;
	box-shadow: $box-shadow;
	padding: 20rpx;

	.not-logged-in {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.logged-in {
		.avatar {
			display: block;
			width: 80rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background-color: $color-primary;
		}
	}

	.user-code {
		image {
			width: 80rpx;
			height: 80rpx;
		}
	}

	.member-info {
		padding: 50rpx 0 20rpx;
		display: flex;

		& > view {
			// background-color: #f2f8f7;
			text-align: center;
			width: 25%;
			height: 120rpx;

			.bottom {
				margin-top: 25rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 35rpx;
					height: 35rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
}
</style>